<div id="content_header">
  <h3>Register a new Contact Type</h3>
</div>
<div class="row">
  <form name="contactForm" role="form" ng-submit="addContact()">

    <div class="form-group">
      <label for="contacttype">
        Contact Type
      </label>
      <span class="error" ng-show="contactForm.contactTypeLabel.$error.required">Required!</span>
      <select name="contacttype" id="contacttype" class="form-control" ng-options="contactType.ContactTypeId as contactType.ContactTypeLabel for contactType in contactTypes" ng-model="contactNew.ContactTypeId">
        <option value="" ng-hide="contactNew.ProvinceId">Select a Contact Type.</option>
      </select>
    </div>

    <!-- <div class="form-group">
      <label for="country">
        Country
      </label>
      <span class="error" ng-show="contactForm.country.$error.required">Required!</span>
      <select name="country" id="country" class="form-control" ng-options="country.CountryId as country.CountryName for country in countries" ng-model="contactNew.CountryId">
        <option value="" ng-hide="contactNew.ProvinceId">Select a province.</option>
      </select>
    </div> -->

    <!-- <div class="form-group">
      <label for="province">
        province
      </label>
      <span class="error" ng-show="contactForm.province.$error.required">Required!</span>
      <select name="province" id="province" class="form-control" ng-options="province.ProvinceId as province.ProvinceName for province in provinces" ng-model="contactNew.provinceId">
        <option value="" ng-hide="contactNew.ProvinceId">Select a province.</option>
      </select>
    </div> -->

    <div class="form-group">
      <label for="city">
        City
      </label>
      <span class="error" ng-show="contactForm.city.$error.required">Required!</span>
      <select name="city" id="city" class="form-control" ng-options="city.CityId as city.CityName for city in cities" ng-model="contactNew.CityId">
        <option value="" ng-hide="contactNew.CityId">Select a City.</option>
      </select>
    </div>

    <div class="form-group">
      <label for="address">
        Address
      </label>
      <span class="error" ng-show="contactForm.address.$error.required">Required!</span>
      <textarea name="address" id="address" class="form-control" cols="30" rows="10" ng-model="contactNew.Address"></textarea>
    </div>

    <div class="form-group">
      <label for="email">
        Email
      </label>
      <span class="error" ng-show="contactForm.email.$error.required">Required!</span>
      <input type="email" name="email" id="email" class="form-control" ng-model="contactNew.Email">
    </div>

    <div class="form-group">
      <label for="phone">
        Phone
      </label>
      <span class="error" ng-show="contactForm.phone.$error.required">Required!</span>
      <input type="text" name="phone" id="phone" class="form-control" ng-model="contactNew.Phone">
    </div>

    <div class="form-group">
      <label for="fax">
        Fax
      </label>
      <span class="error" ng-show="contactForm.fax.$error.required">Required!</span>
      <input type="text" name="fax" id="fax" class="form-control" ng-model="contactNew.Fax">
    </div>

    <div class="form-group">
      <label for="postal">
        PostalCode
      </label>
      <span class="error" ng-show="contactForm.postal.$error.required">Required!</span>
      <input type="text" name="postal" id="postal" class="form-control" ng-model="contactNew.PostalCode">
    </div>

    <button type="submit" class="btn btn-primary" >Submit</button>
  </form>
</div>